<template>

  <transition-group name="noticeIn" tag="div" class="noticeBox hvc flex flex-col flex-align-items">
    <div class="item flex flex-align-items flex-justify-content" v-for="item in list" :key="item.time">
      <img :src="'../../img/common/' + item.type + '.png'" v-if="item.type">
      {{item.msg}}
    </div>
  </transition-group>

</template>

<script>
  module.exports = {
    data: function () {
      return {
        list: []
      }
    },
    methods: {
      add(obj) {
        var e = this;
        console.log(obj);
        var newAry = newObj(this.list);
        newAry.push(obj);
        this.list = newAry;
        setTimeout(() => {
          e.del(obj.time);
        }, 3500);
      },
      del(time) {
        var newAry = newObj(this.list);
        var ind = getMatchedIndex(newAry, time, 'time');
        newAry.splice(ind, 1);
        this.list = newAry;
      }
    },
    created: function () {
    }
  }
</script>
<style>
  .noticeBox {
    position: fixed;
    z-index: 99999999;
  }

  .noticeBox .item {
    max-width: 500px;
    text-align: center;
    color: rgb(255, 255, 255);    
    background: rgb(55, 56, 61);
    padding: 20px 30px;
    font-size: 18px;
    border-radius: 4px;
  }

  .noticeBox .item + .item {
    margin-top: 15px;
  }
  .noticeBox .item img{
    width:22px;
    margin-right: 7px;
  }

  /* 进入和离开的动画效果 */
  .noticeIn-enter-active,
  .noticeIn-leave-active {
    transition: all 0.3s ease;
  }

  /* 进入起点（从上往下移动 30px） */
  .noticeIn-enter {
    opacity: 0;
    transform: translateY(-30px);
  }

  /* 离开终点（原路返回，即向上移动 30px） */
  .noticeIn-leave-to {
    opacity: 0;
    transform: translateY(-30px);
  }

  .noticeIn-leave-active:last-child {
    /* position: absolute;
      opacity: 0; */
  }

  /* 可选：调整列表项的间距（避免离场时布局抖动） */
  .noticeIn-move {
    transition: transform 0.3s ease;
  }

  main .collect-btn.active .dc {
    animation: collect-scale .3s;
  }

  main .collect-btn.active .dc img:last-child {
    opacity: 1;
    transition-delay: 50ms;
  }

  @keyframes collect-scale {

    0%,
    100% {
      transform: scale(1);
    }

    20%,
    30% {
      transform: scale(.4);
    }

    75%,
    80% {
      transform: scale(1.5);
    }
  }

  
</style>